<template>
    <el-form :model="form" label-width="40px" v-loading.fullscreen.lock="loading" style="max-width: 400px;">
        <el-form-item label="昵称">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="密码">
            <el-input type="password" v-model="form.password" />
        </el-form-item>
        <el-form-item>
            <el-button type="text" @click="goToLogIn">登录</el-button>
            <el-button type="primary" @click="signUp">注册</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {signUp} from "@/api/user";

    export default {
        name: "SignUp",
        props: [ 'redirect' ],
        data() {
            return {
                form: {
                    name: '',
                    password: '',
                },
                loading: false,
            }
        },
        methods: {
            signUp() {
                this.loading = true;
                signUp(this.form).then(result => {
                    if (result.status === 201) {
                        this.$alert('您的ID是：' + result.data.id).then(() => {
                            if (this.redirect) {
                                window.location = this.redirect;
                            }
                        }).catch(() => {});
                    } else {
                        this.$alert('服务器错误');
                    }
                }).catch(reason => {
                    this.$alert('发生错误：' + JSON.stringify(reason));
                }).finally(() => {
                    this.loading = false;
                })
            },
            goToLogIn() {
                this.$router.push({ path: 'login', query: { redirect: this.redirect } });
            }
        }
    }
</script>

<style scoped>

</style>
